Skip to content

Latest commit

 

History

History
43 lines (24 loc) · 2.62 KB

04-Projeto de Interface.md

File metadata and controls

43 lines (24 loc) · 2.62 KB

Projeto de Interface

Pré-requisitos: Documentação de Especificação

Visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).

Componentes

Desenvolvemos a logo do aplicativo pensando em cores que transmitam respeito e confiança, por isso a escolha de um roxo como cor principal e de um azul como cor secundária. A paleta de cores foi escolhida a partir do roxo principal, de modo a ter um resultado harmônico e coerente. Para conferir a acessibilidade dessa paleta, foi utilizada a ferramenta de conferência de contraste Adobe, bem como para acessibilidade para daltônicos. Desse modo, garante-se a inclusão e uma boa experiência para qualquer usuário.

Elementos de design

Wireframes

Para os diagramas de fluxo, foram desenvolvidos wireframes, conforme pode ser conferido na próxima seção. Também foram desenhados mock-ups no Figma. É possível conferir no Figma:

Para registro dos mock-ups, temos:

Mock-up Web Mock-up App

Diagrama de Fluxo

O diagrama apresenta o estudo do fluxo de interação do usuário com o sistema interativo, permitindo que o design das interações seja bem planejado e gere impacto na qualidade no design do wireframe interativo que será desenvolvido logo em seguida.

No wireframe web

O fluxo web foi pensado para ser o mais intuitivo possível para pessoas que já utilizam ou não a plataforma.

Wireframe web

No wireframe app

O fluxo do aplicativo igualmente foi desenhado para ser intuitivo. Assim, atende-se aos requisitos não só do público-alvo, mas também de outros possíveis públicos, como idosos.

Wireframe app